<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">所有产品</div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3"
             id="myScrollspy">
          <ul class="nav nav-tabs nav-stacked center-block"
              id="myNav">
            <p>产品类型</p>
            <li :class="item.id==id?'active':''"
                v-for="(item,index) in serviceNavList"
                :key="index">
              <a :href="'#'+item.id">{{item.title}}</a>
            </li>
          </ul>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-9 ">
          <div class="content-block"
               v-for="(item,index) in serviceContentList"
               :key="index">
            <h2 :id="item.id">
              {{item.title}}
              <small>/ {{item.eng_title}}</small>
            </h2>
            <!-- <div v-html="item.content"></div> -->
            <div>
              <el-table :data="item.content"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @row-click="openDetails">
                <el-table-column prop="product_name"
                                 label="舱名">
                </el-table-column>
                <el-table-column prop="company_name"
                                 label="代运商">
                </el-table-column>
                <el-table-column prop="start_point_name"
                                 label="出发地">
                </el-table-column>
                <el-table-column prop="end_point_name"
                                 label="目的地">
                </el-table-column>
                <el-table-column prop="etd_time"
                                 label="计划出发时间"
                                 width="150">
                </el-table-column>
                <el-table-column prop="eta_time"
                                 label="计划到达时间"
                                 width="150">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ProductDetail :row="row"></ProductDetail>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import bus from '@/utils/bus';
// import productDetail from '../view/ProductDetail.vue'
import ProductDetail from '../view/ProductDetail.vue';
export default {
  components: { ProductDetail },
  name: "ServiceDetail",
  data () {
    return {
      id: "section-1",
      serviceNavList: [
        {
          id: "section-1",
          title: "海运订舱"
        },
        {
          id: "section-2",
          title: "陆运订舱"
        },
        {
          id: "section-3",
          title: "空运订舱"
        },
        {
          id: "section-4",
          title: "铁路订舱"
        }
      ],
      serviceContentList: [
        {
          id: "section-1",
          title: "海运订舱",
          eng_title: "Customize App",
          content: []
        },
        {
          id: "section-2",
          title: "陆运订舱",
          eng_title: "Outsourcing",
          content: []
        },
        {
          id: "section-3",
          title: "空运订舱",
          eng_title: "eCommerce Site",
          content: []
        },
        {
          id: "section-4",
          title: "铁路订舱",
          eng_title: "iOS App Dev",
          content: []
        }
      ],
      row: ''
    };
  },
  created () {
    this.getproducts()
  },
  mounted () {
    this.id = this.$route.params.id;
    var top = document.getElementById(this.id).offsetTop;
    $(window).scrollTop(top + 300);
    $("#myNav").affix({
      offset: {
        top: 300
      }
    });
    var wow = new WOW();
    wow.init();
  },
  methods: {
    getproducts () {
      const api = `products`
      this.$axios.get(api)
        .then(res => {
          console.log('获取所有分类：', res.data.data)
          for (let i = 0; i < res.data.data.length; i++) {
            switch (res.data.data[i].product_type) {
              case 'sea':
                this.serviceContentList[0].content.push(res.data.data[i])
                break;
              case 'line':
                this.serviceContentList[1].content.push(res.data.data[i])
                break;
              case 'air':
                this.serviceContentList[2].content.push(res.data.data[i])
                break;
              case 'railway':
                this.serviceContentList[3].content.push(res.data.data[i])
                break;
              default:
                console.log('其他类型舱位')
                return
            }
          }
          console.log(this.serviceNavList)
        })
        .catch(err => {
          console.log(err)
        })
    },
    openDetails (row) {
      console.log(row, "行信息")
      // bus.$emit('goProductDetail', row)
      // this.$router.push('/ProductDetail')
      this.$router.push(
        {
          name: 'ProductDetail',
          params: { row: row }
        })
    },
    tableRowClassName ({ row, rowIndex }) {
      // console.log("??",row,rowIndex)
      var date1 = new Date()
      var date2 = new Date(row.end_time)
      var s1 = date1.getTime()
      var s2 = date2.getTime()
      var total = (s2 - s1) / 1000
      // console.log(total)
      if (total < 0) {
        return 'warning-row';
      }
      // else if (rowIndex === 2) {
      //   return 'success-row'; 
      // }
      return '';
    }
  },

};
</script>

<style>
/* 表格 */
.el-table .warning-row {
  background: rgb(245, 189, 86);
}

.el-table .success-row {
  background: #c5ecb0;
}

.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
ul.nav-tabs {
  width: 200px;
  margin-top: 40px;
  border-radius: 4px;
  background: #fff;
  z-index: 99999;
  border: 1px solid #474747;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
  text-align: center;
  margin: 0;
  border-top: 1px solid #474747;
}
ul.nav-tabs p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #474747;
  margin: 0;
  padding: 10px 0;
}
ul.nav-tabs li:first-child {
  border-top: none;
}
ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}
ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #474747;
  border: 1px solid #474747;
}
ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
  top: 30px;
}
.content-block {
  margin: 50px 0;
}
.content-block > h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
</style>
